1. Introduction
  2. Installing
  3. CSS Files and Structure
  4. Customization
  5. JavaScript
  6. PSD Files
  7. Credits

Infotech

IT Solutions HTML5 Template

Thank you for choosing our template. If you have any questions that are beyond the scope of this file, please feel free to contact us.

Please note: for questions on basic HTML, JavaScript or CSS editing - please give your question to Google or visit W3Schools. You will need some HTML/CSS knowledge to edit this template.

Installing Template

CSS Files and Structure

Infotech has a fixed layout with up to 12 columns. All the information within the main content area is nested within a div. The general template structure is the same throughout the template as it uses the Bootstrap framework.

The multi column layout consists of the .col-md-(from 1 to 12) classes. See Bootstrap documentation here: https://getbootstrap.com/

We're using the following CSS files in this template. Those files also contain some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind that these values might be overridden somewhere else in the files below:

  1. style.css - main css file (included reset styles);
  2. bootstrap.css - Bootstrap css file;
  3. font-awesome.css - FontAwesome icons stylesheet;
  4. owl.css - OWL carousel stylesheet;
  5. jquery.fancybox.css - FancyBox plugin styles;

At first glance, the CSS may look confusing, let me explain each below:

Main CSS Files

style.css file contains specific stylings for the page. The file is separated into sections using:

01- Google Fonts
02- General Variables
03- General Styling
    03.1- Paddings
    03.2- Margins
    03.3- Overlap
    03.4- Default Colors
    03.5- Gradient Colors
    03.6- Background Shape
    03.7- Z Index
    03.8- Container
    03.9- Wide Sec
    03.10- Column Gap
    03.11- Fonts Typography
    03.12- Parallax Background
    03.13- Background Layer
    03.14- Opacity
    03.15- Iframe
    03.16- Width
    03.17- Cross Browser Compatibility
    03.18- Border Radius
    03.19- Particles
    03.20- Animations
    03.21- Slick Arrow
    03.22- Slick Dots
    03.23- Social Media
04- Page Loader Style
05- Header Styles
    05.1- Dropdown
    05.2- Header Search
    05.3- Header Style 1
    05.4- Header Style 2
    05.5- Header Style 3
06- Sticky Header
07- Responsive Header
    07.1- Responsive Menu
08- Theme Button
09- Featured Area Style 1
10- Find Therapist Style 1
11- Sec Title Style 2
    11.1- Ver 2
    11.2- Ver 3
12- Services Style 1
13- Sec Title Style 1
    13.1- Ver 2
14- Services Style 2
    14.1- Ver 2
15- Quote & Facts Style
16- Facts Style 1
17- Request Consultation Style
18- Team Style 1
19- Get In Time & Method Apply Style
20- Online Portal Style
21- Products Style
22- Testimonials & Stories Style
23- Blog Style 1
24- Sponsors List Style
25- Footer Style 1
26- Bottom Bar Style 1
27- Featured Area Style 2
28- Special Style 1
    28.1- Ver 2
    28.2- Ver 3
29- About Style 2
    29.1- Ver 3
30- Live Video Session Style
31- Facts Style 2
32- Services Style 3
33- Find Therapist Style 2
34- Stories Style 1
35- Blog Style 2
36- Get Time & Request Free Consultation Style
37- Footer Style 2
38- Bottom Bar Style 2
39- Featured Area Style 3
40- Services Style 4
41- Enroll Now Style
42- Banners Style
43- About Style 3
44- Procedure Style
45- Courses Style
46- Video & Impacts Style
47- Client Reviews Style
48- Side Title Style
49- Blog Style 3
50- Footer Style 3
51- Bottom Bar Style 3
52- Page Title Style
53- Pagination Style
54- Gallery Style
    54.1- Ver 2
    54.2- Ver 3
55- Appointment Style
56- Contact Style
57- 404 Error Style
58- Search Found Style
59- Sidebar Style
60- Post Detail Style
    60.1- Blog Detail Style
    60.2- Author Box Style
    60.3- Comments Style
    60.4- Comment Reply Style
    60.5- Course Detail Style
61- Team Detail Style
62- Product Detail Style
63- Input Checkbox Styling

Javascript Files and Structure

These are the list of Javascript files that are loaded into templates in end of the Body Section.

Google Fonts

The template usually loads fonts from Google Web Fonts Direcotry, you can change the font with the one that suits you best.

	@import url('https://fonts.googleapis.com/css?family=ABeeZee:400,400i|Roboto:300,400,500,700|Leckerli+One|Merienda+One&display=swap');

Template customization

You can customize this template according to your needs. Here are some basic changes you might need.

Logo Change Just replace the image with your own one:
Apply the above steps to every HTML page you need.
Menu Items Bellow code shows the way to edit your menu items:
Apply the above steps to every HTML page you need.

Image Slider:

Our template uses a very powerful Revolution Slider plugin. The slider's documentation may be found here.

Typography:

  1. Select a suitable font for your main menu or content. (for example we can choose any font from google fonts: http://www.google.com/webfonts#ChoosePlace:select)
  2. Let's choose Happy Monkey font as example.
  3. All you need is to import the font at the beginning of the style.css file: 
    @import url(http://fonts.googleapis.com/css?family=Happy+Monkey);

    and edit the according class or ID.
    In case of changing the menu text font, we need to find and replace font-family here: 
    .main-menu .navigation > li{
	position:relative;
	display: inline-block;
    font-size: 18px;
    line-height: 36px;
    color: #4b4342;
    font-weight: 500;
    margin-right: 6px;
	font-family: 'Happy Monkey', cursive;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}
    Replace font family 'Happy Monkey' with your own one in the code above.
    The same steps we should take to change all other fonts;

Email setup for contact form:

  1. Our PressView template includes working contact form. To change the email address so that all the messages would come to your email you'll need to edit just one file called "contacts-process.php" at line #9 which is located in the "php" folder:
            $ourMail = "your_email@mail.com";
    so, instead of "your_email@mail.com" just input your email address and upload the file to your host. That's all! The contact form, widget and signup page will send all inquiries to your email address.

Google Map setup:

Google Map setup is a very easy process.

All you have to do is to add the map iframe url where you wish.

That's all, your google map is setup and ready to use!

JavaScript

This template imports the following Javascript files. You can get more script info when clicking the appropriate link:

  1. script.js - main js file.
  2. jquery.fancybox.pack.js. Refer to the author's documentation for additional notes on how to use it.
  3. jquery.isotope.min.js Refer to the author's documentation for additional notes on how to use it.
  4. owl.carousel.js Refer to the author's documentation for additional notes on how to use it.
  5. jquery.ui libraries Refer to the author's documentation for additional notes on how to use it.
  6. jquery.min.js Refer to the author's documentation for additional notes on how to use it.

PSD Files

We've included some PSD files to make the re-design process a bit easier.

Please check the PSD folder for all included PSD files.

Credits

We've used the following images, icons and other resources as listed.